<!-- 测试页面 -->
<template>
  <view class="test-page">
    <view class="test-header">
      <text class="header-title">反馈功能测试</text>
    </view>
    
    <view class="test-content">
      <view class="test-section">
        <text class="section-title">按钮点击测试</text>
        <button class="test-btn" @click="testClick">测试按钮点击</button>
        <text class="test-result">{{ clickResult }}</text>
      </view>
      
      <view class="test-section">
        <text class="section-title">表单验证测试</text>
        <picker :range="typeOptions" :value="feedbackTypeIndex" @change="onTypeChange">
          <view class="picker-view">
            {{ feedbackTypeIndex === -1 ? '请选择' : typeOptions[feedbackTypeIndex] }}
          </view>
        </picker>
        <textarea 
          v-model="content" 
          placeholder="输入反馈内容（至少10字）"
          class="test-textarea"
        />
        <text class="char-count">{{ content.length }}/300</text>
        <button class="test-btn" @click="testSubmit" :disabled="!canSubmit">
          {{ canSubmit ? '可以提交' : '不能提交' }}
        </button>
      </view>
      
      <view class="test-section">
        <text class="section-title">调试信息</text>
        <text class="debug-info">反馈类型: {{ feedbackType }}</text>
        <text class="debug-info">内容长度: {{ content.trim().length }}</text>
        <text class="debug-info">canSubmit: {{ canSubmit }}</text>
        <text class="debug-info">submitting: {{ submitting }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';

const clickResult = ref('未点击');
const typeOptions = ['功能建议', 'BUG反馈', '其他'];
const feedbackTypeIndex = ref(-1);
const content = ref('');
const submitting = ref(false);

const feedbackType = computed({
  get: () => feedbackTypeIndex.value === -1 ? '' : typeOptions[feedbackTypeIndex.value],
  set: val => {
    feedbackTypeIndex.value = typeOptions.indexOf(val);
  }
});

const canSubmit = computed(() => {
  const result = !submitting.value && feedbackType.value && content.value.trim().length >= 10;
  console.log('测试页面 canSubmit 计算:', {
    submitting: submitting.value,
    feedbackType: feedbackType.value,
    contentLength: content.value.trim().length,
    result: result
  });
  return result;
});

const testClick = () => {
  console.log('测试按钮被点击');
  clickResult.value = '按钮点击成功！时间: ' + new Date().toLocaleTimeString();
  uni.showToast({ title: '按钮点击成功', icon: 'success' });
};

const onTypeChange = (e) => {
  feedbackTypeIndex.value = Number(e.detail.value);
  console.log('类型改变:', feedbackType.value);
};

const testSubmit = async () => {
  console.log('测试提交被调用');
  if (!canSubmit.value) {
    uni.showToast({ title: '不能提交', icon: 'none' });
    return;
  }
  
  submitting.value = true;
  try {
    // 模拟提交
    await new Promise(resolve => setTimeout(resolve, 1000));
    uni.showToast({ title: '提交成功', icon: 'success' });
    content.value = '';
    feedbackTypeIndex.value = -1;
  } catch (e) {
    uni.showToast({ title: '提交失败', icon: 'none' });
  } finally {
    submitting.value = false;
  }
};
</script>

<style scoped>
.test-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 1rem;
}

.test-header {
  background: #1890FF;
  color: #fff;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  text-align: center;
}

.header-title {
  font-size: 1.2rem;
  font-weight: bold;
}

.test-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.test-section {
  background: #fff;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.section-title {
  font-size: 1rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 0.5rem;
  display: block;
}

.test-btn {
  background: #1890FF;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  margin: 0.5rem 0;
  font-size: 1rem;
}

.test-btn:disabled {
  background: #ccc;
}

.test-result {
  color: #666;
  font-size: 0.9rem;
  margin-top: 0.5rem;
  display: block;
}

.picker-view {
  padding: 0.5rem;
  background: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin: 0.5rem 0;
}

.test-textarea {
  width: 100%;
  min-height: 80px;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin: 0.5rem 0;
  box-sizing: border-box;
}

.char-count {
  color: #666;
  font-size: 0.8rem;
  text-align: right;
  display: block;
}

.debug-info {
  color: #666;
  font-size: 0.9rem;
  margin: 0.2rem 0;
  display: block;
}
</style>
